<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/shuttle.css">
</head>

<body>
  <!-- 总框架 -->
  <div class="fu">
    <!-- 头部 -->
    <div>
      <label for="">模块名称：</label>
      <input type="text" id="input">
      <button id="btn">添加</button>
    </div>
    <!-- 主体 -->
    <div class="box">
      <!-- 左边 -->
      <div class="left">
        <h1>未选模块</h1>
        <ul id="leftul">
          <!-- <li>11</li> -->
        </ul>
      </div>
      <!-- 中间 -->
      <div class="zhong">
        <button class="one" id="toleft">向左</button>
        <button class="one" id="toright">向右</button>
        <button class="one" id="toleftAll">全部向左</button>
        <button class="one" id="torightAll">全部向右</button>
      </div>
      <!-- 右边 -->
      <div class="right">
        <h1>已选模块</h1>
        <ul id="rightul">
          <li>11</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="./js/shuttle.js"></script>
</body>

</html>